<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set     -->
<!-- the browser's rendering engine into           -->
<!-- "Quirks Mode". Replacing this declaration     -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout.   -->

<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
		<title>Event Search Engine</title>
		<link type="text/css" href="welcome.css" rel="stylesheet"/>
		<link type="text/css" href="stylesheets/jquery-ui-1.8.16.custom.css" rel="stylesheet"/>		
		<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
<!-- 		<script>
			$(document).ready(function() {
				$("#datepicker1").datepicker();
				$("#datepicker2").datepicker();
				$("#format").buttonset();
				$("#Searchbutton").button();
				$("#Helpbutton").button();
			});
		</script> -->	
		<script>
		function setSearchFieldFontStyle(isEmpty)
			{
				if (isEmpty == true)
				{
					$("#searchfield").removeClass("fieldisfull");
					$("#searchfield").addClass("fieldisempty");
				}
				else
				{
					$("#searchfield").removeClass("fieldisempty");
					$("#searchfield").addClass("fieldisfull");
				}
			}
			
			function getSource()
			{
				var result = "";
				
				
				if  ($("#source_facebook").attr("checked") == "checked") result += "&source=facebook";
				if  ($("#source_eventful").attr("checked") == "checked") result += "&source=eventful";
				if  ($("#source_upcoming").attr("checked") == "checked") result += "&source=upcoming";
				return result;
			}
			
			function getCurrentPath()
			{
				var myloc = window.location.href;
				var locarray = myloc.split("/");
				delete locarray[(locarray.length-1)];
				return locarray.join("/");
			}
			
		</script>
		<script type="text/javascript">
			
			var searchfieldIsEmpty;
			var searchfieldHint = "Bitte Stichwörter angeben...";
			
		
			$(document).ready( function() {	// OnLoad...
			
				$("#searchfield").attr("value", "");
			
				$("#datepicker1").datepicker();
				$("#datepicker2").datepicker();
				$("#format").buttonset();
				$("#Helpbutton").button();
				$("#Helpbutton").click(function(){
					window.open("helper/main.html", "EventSearch Helper");
				});
				$("#Searchbutton").button();
				$("#Searchbutton").click( function() {
					var get_source = getSource();
					if (get_source != "")
					{
						var get_format = $('input[name="format"]:checked').val();
						var get_keywords = "";
						if (searchfieldIsEmpty == false) {
							get_keywords = $('input[id="searchfield"]').val();
							// iFrame laden:	
							$("#outputbox").attr("src", getCurrentPath() + "event?format=" + escape(get_format) + "&query=" + escape(get_keywords) + (get_source));
						}
						else
						{
							alert("Bitte geben Sie einen Suchbegriff ein!");
						}

					}
					else
					{
						alert("Bitte geben Sie mindestens eine Quelle an!");
					}
				});
				
				searchfieldIsEmpty = true;
				
				$("#searchfield").focus(function() {
					if (searchfieldIsEmpty  == true)
					{
						$("#searchfield").attr("value", "");						
						searchfieldIsEmpty = false;
						setSearchFieldFontStyle(searchfieldIsEmpty);
						$("#searchfield").focus();
					}
				});
				
				$("#searchfield").focusout(function() {
					if ($("#searchfield").attr("value") == "")
					{
						searchfieldIsEmpty = true;
						setSearchFieldFontStyle(searchfieldIsEmpty);
						$("#searchfield").attr("value",searchfieldHint);
					}
				});
				
				$("#searchfield").focusout();
				
			});			
		</script>	
		
		
	</head>
	<body>
		<!-- <h1>Search for Events!</h1>-->
		<div id="sidebarleft">
			<div class="groupbox">
				<h2>Zeitraum:</h2>
				<label class="caption">Von:</label><input id="datepicker1" type="text" size="11" disabled="disabled"><br />
				<label class="caption">Bis:</label><input id="datepicker2" type="text" size="11" disabled="disabled">
			</div>			
			<div class="groupbox">
				<h2>Quellen:</h2>
				<input type="checkbox" name="facebook" value="facebook" id="source_facebook" class="radioelement" checked="checked"><label for="source_facebook" class="radiolabel">Facebook</label><br />
				<input type="checkbox" name="eventful" value="eventful" id="source_eventful" class="radioelement" checked="checked"><label for="source_eventful" class="radiolabel">EventFul</label><br />
				<input type="checkbox" name="upcoming" value="upcoming" id="source_upcoming" class="radioelement" checked="checked"><label for="source_upcoming" class="radiolabel">Upcoming</label>
			</div>
			
			<div class="groupbox">
				<h2>Places:</h2>
				<label class="caption">Ort/Adresse:</label><input id="city" type="text" size="11" disabled="disabled"><br />
				<label class="caption">Radius:</label>
				<select name="radius" id="radius">
					<option selected value=0>egal</option>
					<option value=50>50</option>
					<option value=100>100</option>
					<option value=500>500</option>
					<option value=1000>1000</option>
				</select><span class="text">km</span>
			</div>
			
			<div class="groupbox">
				<h2>Output:</h2>
				<div id="format">
					<input type="radio" name="format" value="map" id="format_map" checked="checked"><label for="format_map">MAP</label>
					<input type="radio" name="format" value="rdf" id="format_rdf"><label for="format_rdf">RDF</label>
					<input type="radio" name="format" value="kml" id="format_kml"><label for="format_kml">KML</label>
					<input type="radio" name="format" value="table" id="format_table"><label for="format_table">Table</label>
				</div>
			</div>		
			
			<div id="searchbox">
				<input type="text" id="searchfield" value="Was?">
			</div>
			
			<div id="Searchbutton">
				Suchen
			</div>
			
			<div id="Helpbutton">
				Help
			</div>
		</div>
		<div id="mainbox">
			<iframe id="outputbox" frameborder="no">
				<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen!<br>Versuchen Sie es bitte mit einem aktuellerem Browser erneut.</p>
			</iframe>
		</div>
	</body>
</html>